<template>
  <div>
    <Header/>
    <div class="tho"></div>
    <div class="me">
      <div class="me-a"></div>
      <button @click="log()">点击登录</button>
      <p>登录后可查看您的资产情况</p>
    </div>
    <div class="main">
      <Main v-for="(v,i) in arr" :key="i" :texta="v.txta" :textb="v.txtb"/>
    </div>
    <h4>更多功能</h4>
    <div class="man">
      <Me v-for="(v,i) in arrlist" :key="i" :txta="v.ta" :txtb="v.tb"/>
    </div>
     <Btn/>
  </div>
</template>

<script>
import Header from "@/components/home-page/header.vue"
import Main from "@/components/home-page/main.vue"
import Me from "@/components/me/me.vue"
import Btn from '@/components/bottomBar.vue'
export default {
  data(){
    return {
      arr:[
        {txta:"iconfont icon-anquanzhongxin",txtb:"安全中心"},
        {txta:"iconfont icon-hebaoguanli",txtb:"云保管"},
        {txta:"iconfont icon-e",txtb:"活动大厅"},
        {txta:"iconfont icon-xitongpingtai-xiaoxizhongxin-xinshixinxi",txtb:"工银信使"},
        {txta:"iconfont icon-rengongkefu",txtb:"投诉咨询"},
        {txta:"iconfont icon-yanglaojin",txtb:"养老金"},
        {txta:"iconfont icon-hebaoguanli",txtb:"智检测"},
        {txta:"iconfont icon-mingxi",txtb:"办理进度"},
        {txta:"iconfont icon-shezhi",txtb:"设置"},
        {txta:"iconfont icon-renwuzhongxin",txtb:"任务中心"}
      ],
      arrlist:[
        {ta:"iconfont icon-xiaoxiangtubiao",tb:"月度账单"},
        {ta:"iconfont icon-xiaoxiangtubiao",tb:"月度账单"},
        {ta:"iconfont icon-xiaoxiangtubiao",tb:"月度账单"},
        {ta:"iconfont icon-xiaoxiangtubiao",tb:"月度账单"},
        {ta:"iconfont icon-xiaoxiangtubiao",tb:"月度账单"},
        {ta:"iconfont icon-xiaoxiangtubiao",tb:"月度账单"},
        {ta:"iconfont icon-xiaoxiangtubiao",tb:"月度账单"}
      ]
    }
  },
  components:{
    Header,
    Main,
    Me,
    Btn
  },
  methods:{
    log(){
      this.$router.push("/login")
    }
  }
}
</script>

<style scoped>
.tho{
  height: 0.3rem;
}
  .me{
    height: 1.2rem;
    margin: auto;
  }
  .me-a{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin: auto;
    background-color: aqua;
    margin-bottom: 0.12rem;
  }
  button{
    width: 1.33rem;
    height: 0.35rem;
    display: block;
    margin: auto;
    font-size: 0.14rem;
    border-radius: 0.2rem;
    background-color: #fc413f;
    color: white;
    border: none;
  }
  p{
    font-size: 0.1rem;
    text-align: center;
    margin-top: 0.06rem;
    color: gray;
  }
  .main{
    width: 2.9rem;
    height: 1.2em;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
  }
  h4{
    font-size: 0.14rem;
    margin-left: 0.15rem;
    line-height: 0.6rem;
  }
  .man{
    width: 2.9rem;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
  }
</style>